網頁網址: http://localhost:63342/IT/index.html?_ijt=3tnkuod6vv07orba37dro24s3m

• 編譯的CSS
  body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.5s ease, color 0.5s ease;
  }

.dark-mode {
background-color: #333333;
color: #ffffff;
}

button {
padding: 10px 20px;
border: 2px solid #cccccc;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dark-mode button {
background-color: #333333;
color: #ffffff;
border-color: #555555;
}

button:hover {
background-color: #e6e6e6;
}

.dark-mode button:hover {
background-color: #4d4d4d;
}

header {
padding: 20px;
text-align: center;
border-bottom: 2px solid #cccccc;
background-color: #ffffff;
color: #000000;
}

.dark-mode header {
background-color: #333333;
color: #ffffff;
border-color: #555555;
}

footer {
padding: 20px;
text-align: center;
border-top: 2px solid #cccccc;
background-color: #ffffff;
color: #000000;
}

.dark-mode footer {
background-color: #333333;
color: #ffffff;
border-color: #555555;
}

main {
padding: 20px;
text-align: center;
background-color: #ffffff;
color: #000000;
}

.dark-mode main {
background-color: #333333;
color: #ffffff;
border-color: #555555;
}

• SASS/SCSS
  // 定義主題變量
  $light-bg: #ffffff;
  $light-text: #000000;
  $light-border: #cccccc;

$dark-bg: #333333;
$dark-text: #ffffff;
$dark-border: #555555;

// 混合器，用來應用不同主題的背景顏色與文字顏色
@mixin theme($bg-color, $text-color, $border-color) {
background-color: $bg-color;
color: $text-color;
border-color: $border-color;
}

// 預設主題樣式（淺色主題）
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.5s ease, color 0.5s ease; // 添加過渡動畫
@include theme($light-bg, $light-text, $light-border); // 應用淺色主題
}

// 深色主題樣式
.dark-mode {
@include theme($dark-bg, $dark-text, $dark-border); // 應用深色主題
}

// 按鈕樣式
button {
padding: 10px 20px;
border: 2px solid;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
@include theme($light-bg, $light-text, $light-border); // 按鈕預設淺色主題樣式

.dark-mode & {
@include theme($dark-bg, $dark-text, $dark-border); // 按鈕深色主題樣式
}

&:hover {
background-color: lighten($light-bg, 20%);
.dark-mode & {
background-color: lighten($dark-bg, 20%);
}
}
}

// 頁眉樣式
header {
padding: 20px;
text-align: center;
border-bottom: 2px solid;
@include theme($light-bg, $light-text, $light-border);

.dark-mode & {
@include theme($dark-bg, $dark-text, $dark-border);
}
}

// 頁腳樣式
footer {
padding: 20px;
text-align: center;
border-top: 2px solid;
@include theme($light-bg, $light-text, $light-border);

.dark-mode & {
@include theme($dark-bg, $dark-text, $dark-border);
}
}

// 主內容樣式
main {
padding: 20px;
text-align: center;
@include theme($light-bg, $light-text, $light-border);

.dark-mode & {
@include theme($dark-bg, $dark-text, $dark-border);
}
}